<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>活动</title>

    <script src="/ss/static/js/jquery/jquery-2.1.4.min.js" type="text/javascript"></script>
    <script src="/ss/static/layui/layui.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/index.js" type="text/javascript"></script>
    <script src="/ss/static/layui/lay/modules/layer.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/sliders.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/html5.js" type="text/javascript"></script>
    <script src="/ss/static/js/index/freezeheader.js" type="text/javascript"></script>
    <script src="/ss/static/js/custom.js" type="text/javascript"></script>
    <link rel="stylesheet" href="/ss/static/layui/css/layui.css" media="all"/>
    <link rel="stylesheet" href="/ss/static/layui/css/modules/layer/default/layer.css"/>
    <link rel="stylesheet" href="/ss/static/css/global.css"/>
</head>

<body>
<div th:replace="template.html::header"></div>

<div class="layui-container container">
    <div class="layui-row layui-col-space20">
        <div class="layui-col-md11">
            <form class="layui-form" method="post" action="activities">
                <div class="layui-form-item">
                    <div class="layui-input-inline" style="width:76%;">
                        <input type="text" name="keyword" lay-verify="required" placeholder="请输入关键字"
                               class="layui-input">
                    </div>
                    <button class="layui-btn" lay-filter="*" lay-submit>搜索</button>
                </div>
            </form>
            <div class="article-main">
                <h2>
                    活动列表
                </h2>
                <div class="article-list" th:each="activity : ${activities}">
                    <a style="cursor: pointer" th:href="'activity?cid=' + ${activity.getCid()}">
                        <figure><img th:src="${activity.getFace()}"></figure>
                    </a>
                    <ul>
                        <h3>
                            <a th:text="${activity.getName()}"></a>
                        </h3>
                        <p th:text="${activity.getContent()}"></p>
                        <p class="autor">
                            <span>
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none" xmlns="http://www.w3.org/2000/svg"><rect x="4" y="4" width="40"
                                                                                          height="40" rx="2" fill="none"
                                                                                          stroke="#333" stroke-width="4"
                                                                                          stroke-linecap="round"
                                                                                          stroke-linejoin="round"></rect><path
                                        d="M4 14H44" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><line x1="44" y1="11" x2="44" y2="23"
                                                                             stroke="#333" stroke-width="4"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"></line><path
                                        d="M12 22H16" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M22 22H26" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M32 22H36" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M12 29H16" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M22 29H26" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M32 29H36" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M12 36H16" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M22 36H26" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M32 36H36" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><line x1="4" y1="11" x2="4" y2="23" stroke="#333"
                                                                             stroke-width="4" stroke-linecap="round"
                                                                             stroke-linejoin="round"></line></svg>
                                <a th:text="${#dates.format(activity.getStart(), 'yyyy-MM-dd')} + ' 到 ' + ${#dates.format(activity.getEnd(), 'yyyy-MM-dd')}"></a>
                            </span>
                            <span th:if="${!user.getRole().equals('student') && !user.getRole().equals('admin') && !joinList.get(activityStat.index)}">
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path d="M23.9917 6H6V42H24" stroke="#333"
                                                                              stroke-width="4" stroke-linecap="round"
                                                                              stroke-linejoin="round"/><path
                                        d="M25 33L16 24L25 15" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"/><path d="M42 23.9917H16" stroke="#333" stroke-width="4"
                                                                       stroke-linecap="round" stroke-linejoin="round"/></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'join(' + ${user.getUid()} + ', ' + ${activity.getCid()} + ')'">加入活动</a>
                            </span>
                            <span th:if="${joinList.get(activityStat.index)}">
                                <svg style="vertical-align: middle" width="15" height="15" viewBox="0 0 48 48"
                                     fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M23.9917 6H6V42H24"
                                                                                          stroke="#333" stroke-width="4"
                                                                                          stroke-linecap="round"
                                                                                          stroke-linejoin="round"/><path
                                        d="M33 33L42 24L33 15" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"/><path d="M16 23.9917H42" stroke="#333" stroke-width="4"
                                                                       stroke-linecap="round"
                                                                       stroke-linejoin="round"/></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'quit(' + ${user.getUid()} + ', ' + ${activity.getCid()} + ')'">退出活动</a>
                            </span>
                            <span th:if="${user.getRole().equals('admin')}">
                                <svg style="vertical-align: middle" width="15" height="15"
                                     viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg"><path d="M7 42H43"
                                                                              stroke="#333"
                                                                              stroke-width="4"
                                                                              stroke-linecap="round"
                                                                              stroke-linejoin="round"/><path
                                        d="M11 26.7199V34H18.3172L39 13.3081L31.6951 6L11 26.7199Z" fill="none"
                                        stroke="#333"
                                        stroke-width="4" stroke-linejoin="round"/></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'openPanel('+${activity.getCid()}+', \'activity\')'">编辑</a>
                            </span>
                            <span th:if="${user.getRole().equals('admin')}">
                                <svg width="15" height="15" viewBox="0 0 48 48" fill="none"
                                     xmlns="http://www.w3.org/2000/svg" style="vertical-align: middle;"><path
                                        d="M9 10V44H39V10H9Z" fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round" style="
"></path><path d="M20 20V33" stroke="#333" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"></path><path
                                        d="M28 20V33" stroke="#333" stroke-width="4" stroke-linecap="round"
                                        stroke-linejoin="round"></path><path d="M4 10H44" stroke="#333" stroke-width="4"
                                                                             stroke-linecap="round"
                                                                             stroke-linejoin="round"></path><path
                                        d="M16 10L19.289 4H28.7771L32 10H16Z" fill="none" stroke="#333" stroke-width="4"
                                        stroke-linejoin="round"></path></svg>
                                <a style="cursor: pointer"
                                   th:onclick="'deleteEntity('+${activity.getCid()}+', \'activity\')'">删除活动</a>
                            </span>
                        </p>
                    </ul>
                </div>
            </div>
            <!--分页-->
            <div id="page"></div>
        </div>
    </div>

    <div id='activity-panel'
         style="left: 0;top:0;right: 0;bottom:0;display: none;justify-content: center;align-content: center;position: fixed;z-index: 10;background-color: rgba(0,0,0,0.5)">
        <div style="width: auto;height: auto;padding: 0 100px;border-radius: 30px;display: flex;flex-direction: column;align-items: center;align-self: center;background-color: whitesmoke">
            <h2 style="font-weight: bold;font-size: 25px;margin-top: 30px">修改活动信息</h2>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">社团id:&nbsp;</p>
                <input type="number" class="layui-input" style="align-self: center;width: 200px" id="activity-aid">
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动名:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-name"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">内容:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-content"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">开始时间:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="activity-start"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">结束时间:&nbsp;</p>
                <input type="date" class="layui-input" style="align-self: center;width: 200px" id="activity-end"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动封面图片网址:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-face"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">预估人数:&nbsp;</p>
                <input class="layui-input" style="align-self: center;width: 200px" id="activity-people"/>
            </div>
            <div style="display: flex;margin-top: 20px;">
                <p style="align-self: center">活动地点:&nbsp;</p>
                <input type="text" class="layui-input" style="align-self: center;width: 200px" id="activity-location"/>
            </div>
            <button class="layui-btn" style="margin-top: 15px;cursor: pointer;margin-bottom: 30px" id="activity-button">
                修改
            </button>
        </div>
    </div>
</div>

<div th:replace="template.html::footer"></div>
</body>

<script type="text/javascript">
    function join(uid, cid) {
        var json = {}
        json['uid'] = uid
        json['cid'] = cid
        $.ajax({
            url: '/ss/api/participant',
            type: 'post',
            data: JSON.stringify(json),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) location.reload()
                else alert('加入活动失败')
            }
        })
    }

    function quit(uid, cid) {
        var json = {}
        json['uid'] = uid
        json['cid'] = cid
        $.ajax({
            url: '/ss/api/participant',
            type: 'delete',
            data: JSON.stringify(json),
            dataType: "json",
            contentType: "application/json;charset=utf-8",
            success: function (result) {
                if (result['success']) location.reload()
                else alert('退出活动失败')
            }
        })
    }
</script>
</html>
